<template>
	<view>
		<!-- 自定义标题栏 -->
		<view class="tar-w" v-if="tarplay" :style="{ height: BarHeight + 'px' }"></view>
		<view class="tar-t" v-if="tarplay" :style="{ height: tarpHaight + 'px',top: BarHeight - 1 + 'px'   }">
			<view class="tar-img" @tap="tarBlack()">
				<image class="fengrui-img" src="../../static/tabar/tarblack.png" mode=""></image>
			</view>
			<view class="tar-t-name">广场</view>
			<view> </view>
		</view>
		<!-- 顶部返回按钮 -->
		<view class="square-black" :style="{ top: BarHeight + 7 + 'px' }" @tap="tarBlack()">
			<image class="square-black-img" src="../../static/tabar/tarblack.png"></image>
		</view>
		<!-- 顶部图片 -->
		<view class="square-img">
			<image class="fengrui" src="../../static/square/squarebg.jpg"></image>
			<view class="square-radius"></view>
		</view>



		<!-- 横条 -->
		<view class="square-ht"></view>

		<!-- 列表 -->
		<view class="square-list" v-for="(item ,index) in CommentList" :key="item.aid">
			<view class="suqare-user">
				<image class="fengrui-img" :src="item.avatarUrl" mode="scaleToFill"></image>
			</view>
			<view class="suqare-info">
				<view class="square-name">
					{{ item.nickName }}
				</view>
				<view class="ssquare-time">
					{{ item.comment_create_time }}
				</view>
				<view class="square-comment">
					<span class="square-p">评论：</span>
					{{ item.comment_content }}
				</view>

				<view class="square-post-bg"  @tap="posTap(item.aid)" >
					<view class="square-post-img">
						<image class="fengrui-img" :src="item.url" mode="aspectFill"></image>
					</view>
					<view class="square-post-title">
						{{ item.article_title }}
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				tarplay: false,
				tarpHaight: '44',
				baclktop: '',
				page: 1,
				pageSize: 10,
				CommentList: [],
				BarHeight: this.BarHeight
			}
		},
		onLoad() {
			this.getCommentList();
		},
		// 监听触底
		onReachBottom() {
			this.page = this.page + 1,
				this.getCommentList();
		},
		onShow: function() {
			// 打开界面触发函数
			this.backHeight();
		},
		// 生命周期 自定义头部导航
		onPageScroll: function(e) {
			// 判断型号 显示不同标题栏高度
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					// console.log(res.statusBarHeight);
					// console.log(res.model);
					that.BarHeight = res.statusBarHeight;
					console.log(that.BarHeight);
					if (e.scrollTop > 200) {
						that.tarplay = true
					} else {
						that.tarplay = false
					}
				}
			});
		},
		methods: {
			// 文章详情跳转
			posTap: function(e) {
				var posId = e;
				// console.log(posId)
				uni.navigateTo({
					url: "../data/data?aid=" + posId
				})
			},
			// 左上角返回按钮
			tarBlack: function() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 判断型号 显示左上角返回按钮
			backHeight: function() {
				var that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.BarHeight = res.statusBarHeight;
						console.log(that.BarHeight);
					}
				});
			},
			// 获取评论列表
			getCommentList: function() {
				var that = this;
				var postData = {
					page: that.page,
					pageSize: that.pageSize
				}
				//传输信息
				app.request('/Article/getAllComment', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							that.CommentList = that.CommentList.concat(res.data.data);
						} else {
							uni.showToast({
								icon: "none",
								title: "暂无数据"
							})
						}
						console.log('成功');
						console.log(res);
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					}
				);
			}
		},
		// 分享小程序界面
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '小程序名字id',
				path: '/pages/index/index',
				imageUrl: ''
			}

		},
	}
</script>

<style>
	/* 自定义标题栏 */
	.tar-t-name {
		position: absolute;
		/* bottom: 30rpx; */
		left: 50%;
		transform: translateX(-50%);
	}

	.tar-img {
		margin-left: 28rpx;
		height: 48rpx;
		width: 48rpx;
		overflow: hidden;
		position: absolute;
		left: 0rpx;
		/* bottom: 28rpx; */
	}

	.tar-t {
		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 4;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tar-w {
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 4;
	}

	/* 列表 */
	.square-post-title {
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		margin-left: 20rpx;
	}

	.square-post-img {
		width: 200rpx;
		height: 120rpx;
		border-radius: 10rpx;
		flex-shrink: 0;
		overflow: hidden;
	}

	.square-post-bg {
		background-color: #f9f9f9;
		border-radius: 10rpx;
		padding: 16rpx;
		margin: 16rpx 0;
		display: flex;
		width: 550rpx;
	}

	.square-p {
		color: #ADADAD;
	}

	.square-comment {
		font-size: 28rpx;
		margin-top: 18rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.ssquare-time {
		color: #ADADAD;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.square-name {
		font-size: 36rpx;
	}

	.suqare-info {
		margin-left: 20rpx;
	}

	.suqare-user {
		height: 70rpx;
		width: 70rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #F1F1F1;
		flex-shrink: 0;
	}

	.square-list {
		display: flex;
		margin: 60rpx 40rpx;
	}

	/* 横条 */
	.square-ht {
		width: 180rpx;
		height: 14rpx;
		background: rgba(240, 240, 240, 1);
		opacity: 1;
		border-radius: 16px;
		margin: 0rpx auto;
	}

	/* 背景图片 */
	.square-black-img {
		height: 54rpx;
		width: 58rpx;
		margin: auto;
		display: block;
	}

	.square-black {
		position: fixed;
		left: 28rpx;
		background: rgba(255, 255, 255, 0.5);
		height: 55rpx;
		z-index: 2;
		width: 100rpx;
		border-radius: 100rpx;
		top: 0rpx;
	}

	.square-radius {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 60rpx;
		width: 100%;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background-color: #FFFFFF;
		z-index: 2;
	}

	.square-img {
		height: 440rpx;
		overflow: hidden;
		position: relative;
	}

	.fengrui {
		height: 100%;
		width: 100%;
	}

	.container {
		padding: 40rpx;
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}
</style>
